<template>
  <div class="questionList">
    <div class="categoryTree">
      <!-- <el-tree :data="treeData"  @node-click="handleNodeClick(data)" /> -->
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <el-card style="width: 100%">
      <el-popconfirm
              title="确认删除吗"
              confirm-button-text="确认"
              cancel-button-text="删除"
              @confirm="deleteAll"
            >
              <template #reference>
                <el-button  type="danger">删除全部</el-button>
              </template>
            </el-popconfirm>
      <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="num" label="题号" width="70"> </el-table-column>
        <el-table-column prop="type" label="题目类型" width="80">
          <template #default="scope">
            {{ scope.row.type == "1" ? "单选" : "多选" }}
          </template>
        </el-table-column>
        <el-table-column prop="examQuestion" label="题目内容" width="180">
          <template #default="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.examQuestion"
              placement="top-start"
            >
              <el-button> {{ scope.row.examQuestion }}</el-button>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="options" label="选项">
          <template #default="scope">
            <el-tooltip
              v-for="(item, index) in scope.row.options"
              :key="index"
              class="box-item"
              effect="dark"
              :content="item.select"
              placement="top-start"
            >
              <el-button>{{ item.select }}</el-button>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="correct_id" label="正确选项" width="80">
        </el-table-column>
        <el-table-column prop="analyse" label="解析" width="180">
          <template #default="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.analyse"
              placement="top-start"
            >
              <el-button> {{ scope.row.analyse }}</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row._id)"
              >编辑</el-button
            >

            <el-popconfirm
              title="确认删除吗"
              confirm-button-text="确认"
              cancel-button-text="删除"
              @confirm="handleDelete(scope.row._id)"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        :page-size="10"
      />
    </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
let treeData = ref([]);
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const seriesId = ref("");
const searchParams = ref({
  pageNo: 1,
  chapterId: "",
});
const total = ref(0);
let tableData = ref([]);
let currentChapterId = "";
onMounted(() => {
  getTreeList();
  // getTableData();
  console.log("111", route.query);
  if (route.query) {
    searchParams.value.chapterId = route.query.chapterId;

    getTableData();
  }
});
const handleCurrentChange = (e) => {
  searchParams.value.pageNo = e;
  getTableData();
};
const deleteAll = async () => {
  let res = await axios.post('/adminapi/question/deleteByChapter',{
    chapterId:searchParams.value.chapterId,
    seriesId:searchParams.value.seriesId,
    total:total.value,
  })
  if(res.data.code == 200) {
    ElMessage.success('删除成功')
    getTableData();
  }else {
    ElMessage.error('删除失败')
  }
}
const handleNodeClick = (data) => {
  console.log("data", data);
  if (data.level == 2) {
    seriesId.value = data.id;
  }
  if (data.level == 4) {
    searchParams.value.chapterId = data.id;
    getTableData();
  }
};
const getTableData = async () => {
  let res = await axios.get(`/adminapi/question/list`, {
    params: searchParams.value,
  });
  if ((res.data.code = 200)) {
    tableData.value = res.data.data.result;
    total.value = res.data.data.total;
  }
};
const handleEdit = (id) => {
  router.push(`/questionManage/questionEdit/${id}`);
};
const getTreeList = async () => {
  let res = await axios.get("/adminapi/categoryTree/list");
  if (res.data.code == 200) {
    treeData.value = res.data.data;
    console.log("treeData", treeData.value);
  }
};
const handleDelete = async (id) => {
  let res = await axios.post(`/adminapi/question/delete`, {
    questionId: id,
    seriesId: seriesId.value,
  });
  if (res.data.code == 200) {
    ElMessage.success("删除成功");
    getTableData();
  } else {
    ElMessage.success("删除失败");
  }
};
</script>

<style lang="scss" scoped>
.questionList {
  display: flex;
  .categoryTree {
    width: 300px;
  }
  .table {
    width: 100%;
  }
}
</style>

